<template>
  <!--    饼状图-->
  <div v-if="showcopy">
    <div class="circle" ref="circle" :id="'progress-bar' + num"></div>
  </div>
</template>
<script>
export default {
  props: {
    color1: String,
    color2: String,
    value: Number,
    dataValue: Array,
    typeCri: Array,
    prodLine: String,
  },
  data() {
    return {
      num: Math.floor(Math.random() * 900) + 100,
      circleBox: null,
      showdata: null,
      showcopy: true,
      labelLineshow: false,
    };
  },
  mounted() {
    let one = null;
    let two = null;
    let three = null;
    let four = null;
    let five = null;
    let six = null;
    this.showdata = this.dataValue;
    if (this.showdata[0].prodinstatus0 == 0) {
      one = false;
    }
    if (this.showdata[1].prodinstatus1 == 0) {
      two = false;
    }
    if (this.showdata[2].prodinstatus2 == 0) {
      three = false;
    }
    if (this.showdata[3].prodoutstatus0 == 0) {
      four = false;
    }
    if (this.showdata[4].prodoutstatus1 == 0) {
      five = false;
    }
    if (this.showdata[5].prodoutstatus2 == 0) {
      six = false;
    }
    if (
      one == false &&
      two == false &&
      three == false &&
      four == false &&
      five == false &&
      six == false
    ) {
      this.showcopy = false;
    }
    if (this.showcopy) {
      this.$nextTick(() => {
        this.circlemessage(this.dataValue, this.typeCri, this.prodLine);
      });
    }
    // 根据页面大小自动响应图表大小
    // window.addEventListener("resize", function () {
    //   this.circleBox.resize();
    // });
  },
  watch: {
    dataValue(newValue, oldValue) {
      this.dataValue = newValue;
      this.circlemessage(this.dataValue, this.typeCri, this.prodLine);
      // this.circleBox.resize();
    },
    totalValue(newValue, oldValue) {
      this.totalValue = newValue;
    },
  },
  methods: {
    circlemessage(dataValue, typeCri, prodLine) {
      this.$nextTick(() => {
        let that = this;
        // let percent = (dataValue / totalValue) * 100;
        this.circleBox = this.$echarts.init(
          document.getElementById("progress-bar" + this.num)
        );
        const option = {
          title: {
            text: prodLine,
            left: "center",
            top: 0,
            padding: [5, 0, 20, 0]
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            bottom: "1%",
            left: "center",
            data: typeCri, // 设置legend的数据项，使用HTML标签包装每个数据项
            show: true, // 设置legend显示
            align: "left",
            icon: "circle",
          },
          series: [
            {
              type: "pie",
              label: {
                show: true,
                // position: "center",
                position: "outside",
                // formatter: "{c} ",
                formatter: function (params) {
                  if (params.value == 0) {
                    that.labelLineshow = false
                    return ''
                  } else {
                    return params.value
                  }
                },
                fontSize: 12,
                fontWeight: "600", // 设置label的文字大小
              },
              labelLine: {
                // show: true,
                show: that.labelLineshow,
                length: 10,
                length2: 0,
              },
              radius: ["40%", "55%"],
              center: ["50%", "40%"], // x轴50%，y轴55%，位置向下偏移
              data: dataValue.map((obj) => {
                var key = Object.keys(obj)[0];
                var keys = "";
                var color = ""; // 设置颜色变量
                if (key == "prodinstatus0") {
                  keys = "备料未进行数量";
                  color = "rgba(51,89,255,0.3)";
                }
                if (key == "prodinstatus1") {
                  keys = "备料进行中数量";
                  color = "rgba(51,89,255,0.6)";
                }
                if (key == "prodinstatus2") {
                  keys = "备料已完成数量";
                  color = "rgba(51,89,255)";
                }
                if (key == "prodoutstatus0") {
                  keys = "下线未进行数量";
                  color = "rgba(237,200,112,0.3)";
                }
                if (key == "prodoutstatus1") {
                  keys = "下线进行中数量";
                  color = "rgba(237,200,112,0.6)";
                }
                if (key == "prodoutstatus2") {
                  keys = "下线已完成数量";
                  color = "rgba(237,200,112)";
                }
                return {
                  name: keys,
                  value: obj[key],
                  itemStyle: {
                    color: color, // 设置颜色
                  },
                };
              }),
            },
          ],
        };
        this.circleBox.setOption(option);
      });
      // }})
    }, // 获取饼图的数据
  },
};
</script>
<style scoped lang="scss">
.circle {
  width: 100%;
  height: 100%;
}
</style>
